<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    1. circle 圆形
    2. r、cx 和 cy 是 circle（圆型）基本的三个属性
    3. r 定义圆形半径
    4. cx 和 cy 分别定义圆心坐标
     -->
    <svg
      width="100"
      height="100"
      viewBox="0 0 100 100"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <!-- 带填充透明度和边框的圆 -->
      <rect width="100%" height="100%" x="0" y="0" fill="pink"></rect>
      <circle
        cx="50"
        cy="50"
        r="15"
        fill="white"
        fill-opacity="0.7"
        stroke="red"
        stroke-width="3"
      />
    </svg>
  </body>
</html>
